<template>
    <el-menu ellipsis class="el-menu-popper-demo" mode="horizontal" :popper-offset="16" style="max-width: 100%">
        <h3>内容管理</h3><br>
    </el-menu>
    <div v-if="table">
        <h1>没有内容</h1>
    </div>
    <div v-else>
        <el-card class="box-card " v-for="data in tableData[0]" style="min-height: 100px;">
            <div class="el-card__body mid">
                <img class="left" :src="'http://' + data.image1" style="height: 200px" />
                <div class="right">
                    <el-card style="max-width: 480px">
                        <template #header>内容详情</template>
                        <p>标题：{{ data.title }}</p>
                        <p>内容：{{ data.content }}</p>
                        <p>发布时间：{{ formatter.format(new Date(data.create_time)) }}</p>
                        <p>点赞量：{{ data.giveLike }}</p>
                    </el-card>
                </div>
                <div class="content">
                    <h3>评论</h3>
                    <el-table :data="data.comments_Com" height="250" style="width: 100%">
                        <el-table-column type="expand">
                            <template #default="props">
                                <div m="4">
                                    <p m="t-0 b-2">内容: {{ props.row.content }}</p>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="Date" prop="create_time" />
                        <el-table-column label="Name" prop="user.name" />
                    </el-table>
                </div>
                <div class="last_right">
                    <el-button type="primary" @click="handleClick(data.id)"
                        style="margin-bottom: 50px; width: 70px;">删除</el-button>
                </div>
            </div>
        </el-card>
    </div>

    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
            :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
            :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'

import api from '@/api/index.js'

let tableData = reactive([])
const total = ref()
const currentPage = ref(1)
const pageSize = ref(3)
const disabled = ref(false)
const background = ref(false)
const table = ref(true)

onMounted(() => {
    get_user_community(currentPage.value, pageSize.value)

})

const options = {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
};
const formatter = new Intl.DateTimeFormat('zh-CN', options); // 使用中文（中国）格式


/**
 * 处理点击事件，删除用户社区数据
 *
 * @param {number} id - 用户社区的ID
 */
const handleClick = (id) => {
    tableData.length = 0;  // 清空数据后重新获取数据
    api.del_user_community_list(id).then((res) => {
        if (res.data.code == 200) {
            get_user_community(currentPage.value, pageSize.value)

        } else {
            console.log(res.data.msg)
        }
    })
}

/**
 * 每页显示条数变化
 *
 * @param val 尺寸值
 */
const handleSizeChange = (val) => {
    tableData.length = 0;  // 清空数据后重新获取数据
    get_user_community(currentPage.value, val)
}
/**
 * 当前页码变化
 *
 * @param val 当前选择的选项值
 */
const handleCurrentChange = (val) => {
    tableData.length = 0;  // 清空数据后重新获取数据
    get_user_community(val, pageSize.value)
}

const get_user_community = (page, pagesize) => {
    api.get_user_community_list(page, pagesize).then((res) => {
        if (res.data.code == 200) {
            table.value = true
        }
        else {
            table.value = false
            tableData.push(res.data)
            total.value = res.data[0].total
        }

    })
}

</script>

<style scoped>
.el-card {
    min-width: 380px;
    margin-right: 20px;
    transition: all .5s;
}

.el-card:hover {
    margin-top: -5px;
}

.mid {
    display: flex;
    position: relative;
    /* 设置为相对定位 */
    /* justify-content: space-between;s */
}


.demo-pagination-block {
    display: flex;
    justify-content: center;
    /* 实现水平居中 */
    align-items: center;
    /* 实现垂直居中 */
    flex-direction: column;
}


.left {
    margin-right: 50px;
    /* 右侧边框设为黑色竖线 */
}

.right {
    margin-right: 50px;
    /* 右侧边框设为黑色竖线 */
}

.content {
    width: 700px;
    /* margin-left: auto; */
}

.last_right {

    /* 将此元素推到右侧 */
    margin-left: auto;
}


.infinite-list {
    height: 300px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.infinite-list .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: var(--el-color-primary-light-9);
    margin: 10px;
    color: var(--el-color-primary);
}

.infinite-list .infinite-list-item+.list-item {
    margin-top: 10px;
}
</style>